* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

input,
button {
    border: 0;
    outline: none;
}

i {
    font-style: normal;
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.l {
    float: left;
}

.r {
    float: right;
}

.input_null {
    &::placeholder {
        color: red;
    }
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?gm9egs');
    src: url('../fonts/icomoon.eot?gm9egs#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?gm9egs') format('truetype'),
        url('../fonts/icomoon.woff?gm9egs') format('woff'),
        url('../fonts/icomoon.svg?gm9egs#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

html {
    height: 100%;

    body {
        height: 100%;
        min-height: 775px;
        background-color: rgb(184, 229, 248);
        font-family: '微软雅黑';

        .bgi {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background: url(../images/bgi.png) no-repeat;
            background-size: cover;

            .main {
                display: flex;
                flex: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;

                .logo {
                    width: 128px;
                    height: 81px;
                    background: url(../images/login.png);
                    background-size: 100% 100%;
                }

                .login {
                    position: relative;
                    width: 400px;
                    margin-top: 24px;
                    background-color: #fff;

                    .user_login {

                        .login_tabs {
                            width: 100%;
                            height: 60px;
                            margin-bottom: 14px;
                            padding: 0 24px 0;

                            div {
                                float: left;
                                height: 100%;
                                margin-right: 24px;
                                line-height: 60px;
                                font-size: 16px;
                                cursor: pointer;
                            }

                            .no_psd_login {
                                font-weight: 700;
                                border-bottom: 3px solid #06f;
                            }
                        }

                        .no_psd_form {
                            position: relative;
                            height: 205px;
                            padding: 0 24px 0;

                            .user_account {
                                display: flex;
                                width: 100%;
                                height: 46px;
                                line-height: 45px;
                                margin-top: 24px;
                                border-bottom: 1px solid #ebebeb;

                                .telephone_local {
                                    height: 46px;
                                    color: #8590a6;
                                    font-size: 14px;
                                    cursor: pointer;

                                    .country {
                                        margin-right: 8px;
                                    }

                                    &::after {
                                        font-family: 'icomoon';
                                        content: '\e907';
                                    }

                                    .Select-list {
                                        display: none;
                                        overflow: auto;
                                        position: absolute;
                                        top: 0;
                                        left: 3px;
                                        width: 200px;
                                        height: 200px;
                                        padding: 10px 0;
                                        background-color: #fff;
                                        box-shadow: 0 0 3px 3px #ebebeb;

                                        div {
                                            width: 100%;
                                            height: 40px;
                                            line-height: 40px;
                                            padding: 0 20px;
                                            color: #8590a6;
                                            font-size: 14px;

                                            &:hover {
                                                background-color: #f6f6f6;
                                            }
                                        }
                                    }
                                }

                                .tel {
                                    flex: 1 1;
                                    height: 45px;
                                    font-size: 16px;

                                    &::placeholder {
                                        font-size: 14px;
                                    }
                                }

                                i {
                                    margin: 0 8px;
                                    color: #ebebeb;
                                }
                            }

                            .password {
                                width: 100%;
                                height: 46px;
                                border-bottom: 1px solid #ebebeb;
                                font-size: 16px;
                                margin-top: 14px;

                                &::placeholder {
                                    font-size: 14px;
                                }
                            }


                            .tips {
                                display: flex;
                                justify-content: space-between;
                                width: 100%;
                                margin-top: 14px;
                                font-size: 14px;
                            }

                            .foreign_login {
                                cursor: pointer;
                                color: #175199;

                                &:hover {
                                    color: #8590a6;
                                }
                            }

                            .forget_psd {
                                cursor: pointer;
                                color: #8590a6;
                            }

                            .button {
                                height: 36px;
                                width: 100%;
                                margin-top: 30px;
                                border-radius: 4px;
                                background-color: #06f;
                                color: #fff;
                            }

                            .get_message {
                                position: absolute;
                                top: 75px;
                                right: 24px;
                                color: #175199;
                                font-size: 14px;

                                &:hover {
                                    color: #8590a6;
                                }
                            }

                            .close_eye {
                                display: none;

                                &::after {
                                    position: absolute;
                                    top: 75px;
                                    right: 30px;
                                    font-family: 'icomoon';
                                    content: '\e901';
                                    font-size: 20px;
                                    color: #8590a6;
                                }
                            }

                            .open_eye::after {
                                content: '\e902';
                            }
                        }

                        .deal {
                            padding: 12px 24px;
                            margin-top: 28px;
                            border-bottom: 1px solid #ebebeb;
                            color: #808080;
                            font-size: 13px;

                            a {
                                color: #808080;
                            }
                        }
                    }

                    .sweep_login {
                        display: none;

                        .sweep_login_content {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 24px;
                            border-bottom: 1px solid #ebebeb;

                            h1 {
                                margin: 19px 0 40px 0;
                                font-weight: 400;
                                font-size: 24px;
                            }

                            .qr_code {
                                position: relative;
                                width: 150px;
                                height: 150px;

                                .img1 {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 150px;
                                    height: 150px;
                                }

                                .img2 {
                                    display: none;
                                    position: absolute;
                                    top: -25px;
                                    left: 100px;
                                    width: 128px;
                                    height: 200px;

                                }
                            }

                            span {
                                margin-top: 25px;
                                font-size: 14px;

                                a {
                                    color: #175199;
                                }
                            }

                            p {
                                width: 196px;
                                font-size: 14px;
                                line-height: 22px;
                            }
                        }
                    }

                    .social_login {
                        width: 100%;
                        height: 60px;
                        line-height: 60px;
                        font-size: 15px;
                        padding: 0 24px 0;

                        span {
                            float: left;
                            height: 100%;
                            color: #8590a6;
                        }

                        .social_account {
                            float: right;
                            height: 100%;

                            div {
                                float: left;
                            }

                            .social_icon1 {
                                margin-right: 6px;

                                &::after {
                                    font-family: 'icomoon';
                                    content: '\e905';
                                    color: rgb(96, 200, 77);
                                }
                            }

                            .social_icon2 {
                                margin: 0 6px 0 22px;

                                &::after {
                                    font-family: 'icomoon';
                                    content: '\e904';
                                    color: rgb(80, 200, 253);
                                }
                            }

                            .social_icon3 {
                                margin: 0 6px 0 22px;

                                &::after {
                                    font-family: 'icomoon';
                                    content: '\e903';
                                    color: rgb(251, 102, 34);
                                }
                            }

                            .social_introduce {
                                cursor: pointer;
                                color: #8590a6;
                            }
                        }
                    }

                    .download {
                        display: flex;
                        width: 100%;
                        height: 60px;
                        background-color: #f6f6f6;

                        div {
                            flex: 1;
                            line-height: 60px;

                            &:first-child {
                                a {
                                    display: block;
                                    padding-left: 24px;
                                    text-align: left;
                                    font-size: 15px;
                                    color: #006fff;


                                    &::before {
                                        vertical-align: middle;
                                        margin-right: 14px;
                                        font-family: 'icomoon';
                                        content: '\ea52';
                                        color: rgb(15, 136, 235);
                                        font-size: 21px;
                                    }
                                }
                            }

                            &:last-child {
                                a {
                                    display: block;
                                    padding-right: 24px;
                                    text-align: right;
                                    font-size: 15px;
                                    color: #006fff;

                                    &::before {
                                        vertical-align: middle;
                                        margin-right: 14px;
                                        font-family: 'icomoon';
                                        content: '\e906';
                                        color: rgb(15, 136, 235);
                                        font-size: 21px;
                                    }
                                }
                            }
                        }
                    }

                    .qr_code_toggle {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 52px;
                        height: 52px;
                        background: url(../images/二维码登录.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }

            .footer {
                padding-bottom: 20px;

                ul {
                    text-align: center;

                    li {
                        display: inline-block;

                        a {
                            font-size: 12px;
                            color: #fff;
                            line-height: 21px;
                        }

                        &::after {
                            display: inline-block;
                            content: '·';
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}